<script setup>

</script>

<template>
  <div class="header-container">
    <router-link to="/" custom v-slot="{isActive,navigate}">
      <div :class="{active:isActive}" @click="navigate">
        <svg t="1658309173017" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5609" width="20" height="20"><path d="M726.4 201.6c-12.8-9.6-28.8-6.4-38.4 0-9.6 9.6-16 25.6-9.6 38.4 6.4 12.8 9.6 28.8 12.8 44.8-86.4-201.6-230.4-246.4-236.8-249.6-9.6-3.2-22.4 0-28.8 6.4-9.6 6.4-12.8 19.2-9.6 28.8 12.8 86.4-25.6 188.8-115.2 310.4-6.4-25.6-16-51.2-32-80-9.6-9.6-22.4-16-35.2-12.8-16 3.2-25.6 12.8-25.6 28.8-3.2 48-25.6 92.8-51.2 140.8-22.4 41.6-44.8 86.4-54.4 134.4-32 150.4 99.2 329.6 233.6 380.8 9.6 3.2 19.2 6.4 32 9.6-25.6-19.2-41.6-51.2-48-96-25.6-195.2 185.6-246.4 195.2-425.6 153.6 105.6 224 336 137.6 505.6 3.2 0 6.4-3.2 9.6-3.2 0 0 3.2 0 3.2-3.2 163.2-89.6 252.8-208 259.2-345.6 16-211.2-163.2-390.4-198.4-412.8z" p-id="5610"></path></svg>
        网站收藏
      </div>
    </router-link>

    <router-link to="/imageGallery" custom v-slot="{isActive,navigate}">
      <div :class="{active:isActive}" @click="navigate">
        <svg t="1658309197801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5761" width="20" height="20"><path d="M512 228.266667c-196.266667 0-354.133333 160-354.133333 354.133333V725.333333C352 725.333333 512 567.466667 512 371.2c2.133333 194.133333 160 354.133333 354.133333 354.133333v-142.933333c0-196.266667-157.866667-354.133333-354.133333-354.133333zM516.266667 202.666667c23.466667 0 44.8 2.133333 66.133333 6.4l25.6-164.266667c0-2.133333 0-2.133333-2.133333-4.266667s-2.133333 0-4.266667 0l-14.933333 12.8c-8.533333 8.533333-21.333333 8.533333-27.733334 0l-27.733333-27.733333c-6.4-2.133333-12.8-4.266667-19.2-4.266667-6.4 0-12.8 2.133333-19.2 8.533334l-27.733333 27.733333c-8.533333 8.533333-21.333333 8.533333-27.733334 0l-14.933333-14.933333s-2.133333-2.133333-4.266667 0c-2.133333 0-2.133333 2.133333-2.133333 4.266666l25.6 164.266667c23.466667-6.4 49.066667-8.533333 74.666667-8.533333zM514.133333 968.533333c-132.266667 0-245.333333-91.733333-275.2-213.333333-10.666667 2.133333-23.466667 4.266667-36.266666 6.4C236.8 898.133333 362.666667 1002.666667 514.133333 1002.666667s277.333333-104.533333 311.466667-243.2c-12.8-2.133333-23.466667-4.266667-36.266667-6.4-32 123.733333-142.933333 215.466667-275.2 215.466666z" p-id="5762"></path></svg>
        图片收藏
      </div>
    </router-link>

  </div>
</template>

<style scoped lang="stylus">
.header-container
  display flex
  background #1e90ff
  height 44px
  div
    padding-left 10px
    padding-right 20px
    display flex
    justify-content center
    align-items center
    color #ccc
    cursor pointer
    &.active
      color #fff
    svg
      margin-right .2rem
      fill #ccc
    &.active svg
      fill #fff
</style>